<template>
  <div>
    <!-- :rules="rules" 表单校验 -->
    <el-form ref="searchForm" :label-position="labelPosition" :model="searchForm" label-width="80px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="分类" prop="className">
            <el-select v-model="searchForm.className" placeholder="请选择">
              <el-option
                v-for="item in classfis"
                :key="item"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="编号" prop="itemNumber">
            <el-input v-model="searchForm.itemNumber" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="品牌" prop="brand">
            <!--  v-model双向绑定表单数据 -->
            <el-input v-model="searchForm.brand" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="上架时间" prop="time">
            <div class="block">
              <span class="demonstration"></span>
              <el-date-picker
                v-model="searchForm.createTime"
                align="right"
                type="date"
                placeholder="选择日期"
                :picker-options="pickerOptions"
              ></el-date-picker>
            </div>
            <!-- <el-input v-model="searchForm.time" placeholder="请选择"></el-input> -->
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商品名称" prop="itemName">
            <el-input v-model="searchForm.itemName" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <el-button type="primary" @click="onSubmit('searchForm')" icon="el-icon-search" >查询</el-button>
            <el-button @click="onClear('searchForm')" icon="el-icon-close">清除</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import axios from 'axios' //引入Axios,用于请求后台
export default {
  data() {
    return {
      classfis:[],//分类列表
      labelPosition: "left", //对齐方式
      searchForm: {
        className: "",
        itemNumber: "",
        brand: "",
        itemName: "",
        createTime: ""//时间选择器
      },
      pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }],
          createTime:''//绑定的值
        },
    };
  },
  created() {
    axios.get("http://47.102.99.195:8888/item/getClassList").then(
      response=>{
        // console.log(response.data.obj);
        // this.searchForm.calssfi = response.data.obj
        this.classfis = response.data.obj;
        // console.log(this.searchForm.calssfi);

      }
    ).catch(
      error=>
      this.$message({
        type:'error',
        message:'获取分类列表失败'
      })
    )
  },
  methods: {
    onSubmit(form) {
      console.log(`item search form submit!为`);
      console.log(this.searchForm);
      //子组件向父组件传递值
      if(this.searchForm.createTime!=""){
        var d = new Date(this.searchForm.createTime);
        this.searchForm.createTime = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate();
      }
      this.$emit('search-form',this.searchForm);
    },
    onClear(form) {
      // this.$refs[form].resetFields();
      //重置clear的正确方式
      this[form] = {};//初始化表单
      if (this.$refs[form] !== undefined) {
        this.$refs[form].resetFields();
      }
      //子组件向父组件传递值
      this.$emit('search-form',this.searchForm);
    }
  }
};
</script>
